<template>
	<div class="wrap">
		<h1 class="title">宿舍管理</h1>
		<el-row>
			<el-form-item label="楼栋">
				<el-select v-model="buildId">
					<el-option :value="0" label="请选择" />
					<el-option :value="i" v-for="i in 20" :key="i" :label="`${i} 栋`" />
				</el-select>
			</el-form-item>
		</el-row>
		<el-space class="show" :wrap="true" :size="20">
			<template v-for="build in allBuildInfo" :key="build.id">
				<DomitoryCard
					:build="build.buildId"
					:room-id="build.dorNumber"
					:status="`${build.capacity - build.already == 0 ? '已住满' : '未住满'}`" />
			</template>
		</el-space>

		<el-row class="pagination" v-if="total>=pageSize">
			<el-pagination
				v-model:current-page="currentPage"
				v-model:page-size="pageSize"
				:page-sizes="pageSizes"
				small="small"
				:background="true"
				layout="total,sizes,prev, pager, next"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange" />
		</el-row>
	</div>
</template>

<script setup>
import { onMounted,ref, watch } from 'vue'
import DomitoryCard from '@/components/mod/DomitoryCard.vue'
import { getBuildAll, getBuildOne } from '@/utils/axios/master'
import { getBuildInfoAll ,getBuildInfoOneBuild} from '@/utils/axios/getTotal'



const pageSize = ref(40)
const currentPage = ref(1)
const pageSizes=ref([40,56,100,200,400])
// 所有房间信息数据
const allBuildInfo = ref([])
// 搜索条件
const buildId = ref(0)

// 房间总数
const total = ref(20)


const handleSizeChange=async(val)=>{
	let{ data } = await getBuildAll({ currentPage: currentPage.value, pageSize: val})
	allBuildInfo.value=data
}

const handleCurrentChange = async(val) => {
	let data=[]
	if(buildId.value){
		({data}=await getBuildOne({buildId:buildId.value,currentPage:val,pageSize:pageSize.value}))
	}else{
		({ data } = await getBuildAll({ currentPage: currentPage.value, pageSize: pageSize.value }))
	}
	allBuildInfo.value=data
}

// 监听builId变化
watch(buildId, async (newVal) => {
	currentPage.value = 1
	let data = []
	let res
	if(newVal){
		({data}=await getBuildOne({buildId:newVal,currentPage:currentPage.value,pageSize:pageSize.value}))
		 res=await getBuildInfoOneBuild({buildId:newVal})
	}else{
		({ data } = await getBuildAll({ currentPage: currentPage.value, pageSize: pageSize.value }))
		res= await getBuildInfoAll()
	}	
	allBuildInfo.value = data
	total.value=res.data
})

onMounted(async () => {
	let { data } = await getBuildAll({ currentPage: currentPage.value, pageSize: pageSize.value })
	allBuildInfo.value = data
	let res=await getBuildInfoAll()
	total.value=res.data
})
</script>

<style scoped lang="scss">
.show {
	padding: 5px;
}

.el-select {
	width: 100px;
}


</style>
